<template>
	<div class="input08">
		<label v-if="title!==''">
			<span style="color:red" v-show="req">*</span>
			{{title}}:
		</label>
		<el-input class="input08-input" @change="onchange" :placeholder="placeholder" v-model="val" :type="type"
			:disabled="disabled" @blur="blurInput">
			<i slot="suffix" v-bind:class="[icon, 'el-input__icon']"></i>
		</el-input>
		<span class="item__error" :class="errClass" v-show="ifshow">*{{msg}}</span>
	</div>
</template>
<style scoped>
	.input08 {
		margin: 5px 0px;
		position: relative;
	}

	.input08-input {
		width: auto !important;
	}

	.input08 i {
		font-size: 18px;
	}

	.input08>>>.el-input__inner {
		background: #ffffff;
		/* height: 32px!important; */
		text-align: center;
		width: 100% !important;
	}

	.input08>>>.el-input__inner {
		height: 32px !important;
	}

	.input08>>>.el-input__icon {
		line-height: 32px !important;
	}

	/* .remarkW {
  color: red;
  font-size: 12px;
  display: inline-block;
} */
	.item__error {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1;
	}

	.err-b-c {
		position: absolute;
		padding-top: 4px;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
<script>
	export default {
		name: "input08",
		props: {
			title: {
				default: "",
			},
			icon: {
				default: "",
			},
			value: {
				default: "",
			},
			type: {
				default: "",
			},
			req: {
				default: false,
			},
			placeholder: {
				default: "",
			},
			disabled: {
				default: false,
			},
			errClass: {
				default: () => ["err-b-c"],
			},
			// msg: {
			//     default: "内容不能为空"
			// },
		},
		meta: {
			descr: "普通输入框--验证是否为空",
		},
		data() {
			return {
				val: "",
				ifshow: false,
				msg: "内容不能为空",
			};
		},
		methods: {
			onchange(d) {
				this.$emit("input", d);
			},
			blurInput() {
				// this.$emit('input', val);
				let that = this;
				if (that.val == "") {
					that.ifshow = true;
				} else {
					that.ifshow = false;
				}
			},
		},
		created() {
			this.val = this.value;
		},
		watch: {
			val(value) {
				this.$emit("input", value);
			},
			value() {
				this.val = this.value;
			},
		},
	};
</script>